<template>
    <div class="top-div">
        <div style="float: left;"><img class="image" :src="address.minioUrl+'image/'+userInfo?.avatar" alt=""></div>
        <div class="username-div">{{userInfo?.userName}}</div>
        <div class="email-div">
            <div>邮箱：{{userInfo?.email?userInfo?.email:'暂无绑定邮箱'}}</div>
            <div style="margin-top: 10px;">喜欢：{{userInfo?.likeCount}}</div>
            <div style="margin-top: 10px;">被关注：{{userInfo?.followedCount}}</div>
        </div>
    </div>
    <div class="main-div">
        <WorksOrLikesView :userId="userId"></WorksOrLikesView>
    </div>
    
    <el-dialog v-model="showLoginView" width="800" style="height: 500px;border-radius: 20px;background: linear-gradient(to bottom, #fbf0f2 10%, #ffffff);color: black;" center>
        <template #header>
            <h2 style="margin-top: 0px;">登录</h2>
        </template>
        <LoginView></LoginView> 
    </el-dialog>
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import UserInfo from '@/types/user/UserInfo'
    import { address } from '@/base/address';
    import WorksOrLikesView from './worksOrLikesView.vue';
    import getUserInfo from '@/utils/getUserInfo'
    import { ElMessage } from 'element-plus';
    const showLoginView=ref(false)
    const props=defineProps(['userId'])
    const userInfo=ref<UserInfo>()
    

    onMounted(async() => {
        try{
            userInfo.value=await getUserInfo(props.userId)
        }catch(e){
            ElMessage.error("尚未登录")
            showLoginView.value=true
        }
        
    })  
</script>


<style scoped>

    .main-div{
        clear: both;
        margin-top: 80px;
    }

    .image{
        width: 160px;
        height: 160px;
        border-radius: 50%;
    }

    .top-div{
        margin-left: 3%;
    }
    .username-div{
        font-size: 30px;
        margin-left: 15%;
    }

    .email-div{
        font-size: 20px;
        margin-top: 10px;
        margin-left: 15%;
    }
    .el-menu-item:not(.is-disabled):focus,.el-menu-item:not(.is-disabled):hover{
        background-color: transparent;
    }

    .el-menu-item{
        height: 40px;
        opacity: 0.5;
    }
    .el-menu-item.is-active , .el-menu-item:hover{
        color: aliceblue !important;
        font-weight: bolder;
        opacity: 1;
    }
    

</style>